<template>
    <div teleport="body" class="top-box" v-show="show" @click="goTop">
        <van-icon name="back-top" :size="size"></van-icon>
    </div>
</template>
  
<script>
export default {
    props:{
        size:{
            type:Number,
            default:30
        }
    },
    data() {
        return {
            show: false
        }
    },   
    mounted() {
        window.onscroll = () => {
            if (document.documentElement.scrollTop > 0 || document.body.scrollTop > 0) {
                this.show = true;
            } else {
                this.show = false;
            }
        }
    },
    methods: {
        goTop(){
            document.documentElement.scrollTop=0;
            document.body.scrollTop = 0;
        }
    }
}
</script>
  
<style scoped>
.top-box {
    position: fixed;
    right: 10px;
    bottom: 60px;
    background-color: white;
    border-radius: 50%;
}
</style>